<template>
	<div class="industry1">
		<div class="industry1_left">
			<div class="industry1_title">
				<div class="title">
					<div class="title_line"></div>
					<div class="title_year">2019</div>
				</div>
				<div class="title1">
					<div class="title_line"></div>
					<div class="title_year">2020</div>
				</div>
			</div>
			<div class="industry1_list">
				<div class="list_item" v-for="(temp,index) in showstruct" :key="index">
					<div :class="temp.colori"></div>
					<div class="item_content">
						<div class="item_cTop">
							<div class="item_cTop_text">{{temp.name}}</div>
							<div class="item_cTop_text">{{temp.dt19}}</div>
							<div class="item_cTop_text">{{temp.dt20}}</div>
						</div>
						<div class="item_cBottom">
							<div class="item_cTop_text">(增值)</div>
							<div class="item_cTop_text">{{temp.up19}}</div>
							<div :class="index==0||index==3?'item_cTop_text1':'item_cTop_text'">{{temp.up20}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="industry1_right">
			<div class="industry1_right_item">
				<industry1Ec :dataitem="data19"></industry1Ec>
			</div>
			<div class="industry1_right_item">
				<industry1Ecb :dataitem="data20"></industry1Ecb>
			</div>
		</div>
	</div>
</template>

<script>
	import industry1Ec from '../../components/industry/industryEc.vue'
	import industry1Ecb from '../../components/industry/industryEcb.vue'
	export default {
		name: 'industry1',
		data() {
			return{
				cockpitData:[],
				data20:[{
					"name": "磁性",
					"value": "0",
				},{
					"name": "电子信息",
					"value": "0",
				},{
					"name": "高分子",
					"value": "0",
				},{
					"name": "金属",
					"value": "0",
				},{
					"name": "其他",
					"value": "0",
				}],
				data19:[{
					"name": "磁性",
					"value": "0",
				},{
					"name": "电子信息",
					"value": "0",
				},{
					"name": "高分子",
					"value": "0",
				},{
					"name": "金属",
					"value": "0",
				},{
					"name": "其他",
					"value": "0",
				}],
				up19:[],
				up20:[],
				itemTitle:[],
				arrColor:["item_line","item_line activep","item_line activeo","item_line activeb"],
				showstruct:[
					{
						"colori": "item_line",
						"dt19": "0",
						"dt20": "0",
						"name": "磁性材料",
						"up19": "0%",
						"up20": "0%",
					},{
						"colori":"item_line activep",
						"dt19": "0",
						"dt20": "0",
						"name": "电子信息",
						"up19": "0%",
						"up20": "0%",
					},{
						"colori": "item_line activeo",
						"dt19": "0",
						"dt20": "0",
						"name": "高分子",
						"up19": "0%",
						"up20": "0%",
					},{
						"colori": "item_line activeb",
						"dt19": "0",
						"dt20": "0",
						"name": "金属材料",
						"up19": "0%",
						"up20": "0%",
					}
				],
			}
		},
		methods: {
			getData(){
				var dt = {
					"params": {
						"normGuid": "8bc1ae6c-7160-4f58-9b0c-ef0126e4b8ff",
						"fieldList": []
					}
				};
				this.$axios.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
					.then(response=> {
						this.cockpitData=response.data.custom.result.cockpitData;
						
						let itemData = this.cockpitData.map(item=>{
							return item.index_value;
						});
						let itemTitle = this.cockpitData.map(item=>{
							return item.index_name.slice(10,-6);
						});
						this.data20 = itemData.slice(0,5);
						this.data19 = itemData.slice(5,10);
						this.data20.splice(0,0,"2020");
						this.data19.splice(0,0,"2019");
						console.log(this.data19)
						this.itemTitle = itemTitle.slice(0,4);
						this.$nextTick(()=>{
							this.getData2();
						});
					})
					.catch(function(error) {
						console.log(error);
					});
				
			},
			getData2(){
				var dt2 = {
					"params": {
						"normGuid": "cd36fbff-d2dc-4083-9854-d24d66879631",
						"fieldList": []
					}
				};
				this.$axios.post('dcockpit/rest/cockpitApi/searchListNormResult', dt2)
					.then(response=> {
						
						let cockpitData=response.data.custom.result.cockpitData;
						let itemData = cockpitData.map(item=>{
							return item.index_value;
						});
						this.up19 = itemData.slice(0,5);
						this.up20 = itemData.slice(5,10);
						for(let i=0;i<this.itemTitle.length;i++){
							let tempstruct = {
								dt19:this.data19[i+1].toFixed(2),
								dt20:this.data20[i+1].toFixed(2),
								up19:this.up19[i].toFixed(2).toString()+'%',
								up20:this.up20[i].toFixed(2).toString()+'%',
								colori:this.arrColor[i],
								name:this.itemTitle[i].replace('材料','').replace('新','').replace('先进',''),
							};
							this.showstruct.push(tempstruct);
							
						}
						
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		mounted() {
			// this.getData();
		},
		components:{
			industry1Ec,
			industry1Ecb
		}
	} 
</script>


<style lang="stylus" rel='stylesheet/stylus' scoped>
	@import "~@/assets/industry1.styl"
</style>
